<template>
	<view class="my-shops" @tap="jumpTo('/pages/home/detail?id=' + shops.id)">
		<image class="logo" :src="shops.logo|| '/static/default_shop_log.png'" mode="aspectFill"></image>
		<view class="info">
			<view class="name text-cut">
				<text class="name-title">{{ nameText(shops)}}</text>
        <text class="text-samll" v-if="shops.distance">{{shops.distance}}</text>
			</view>
      <!-- <my-stars></my-stars> -->
      <view class="shop-tel">
		<!-- <image src="../static/tell.png" mode=""></image> -->
		<text class="cuIcon-dianhua"></text>
		<text>{{shops.tel?shops.tel:'暂无'}}</text>
	</view>
			<view class="discount">
        <!-- <text v-if="shops.discount > 0 && shops.discount < 100">
          <text class="discount-text" >优惠券</text>
          <text class="discount-text" v-if="shops.rebate==1">抵扣{{(100 - shops.discount * 1).toFixed(2)}}%</text>
        </text> -->
        <!-- <text v-else class="discount-text">无折扣</text> -->
        <text class="discount-btn">进店</text>
				<!-- <view class="coupon" v-if="shops.discount > 0 && shops.discount < 100">
					优惠券可抵扣{{(100 - shops.discount * 1).toFixed(2)}}%
				</view>
				<view class="coupon" v-else>
					无折扣
				</view>
				<view class="distance" v-if="shops.distance">
					{{shops.distance}}
				</view> -->
			</view>
			<view class="address text-cut" v-if="shops.address">
				<text class="icon cuIcon-locationfill"></text>{{shops.address}}
			</view>
			<view class="address text-cut" v-else>
				<text class="icon cuIcon-locationfill"></text>{{shops.province}}{{shops.city}}{{shops.area}}
			</view>
			<view class="discount">
				<text>商家总流水:{{shops.income}}元</text>
			</view>
		</view>
	</view>
</template>

<script>
  import MyStars from "@/components/MyStars";
	export default {
		name: 'MyShops',
		props: {
			shops: {
				type: Object,
				default: () => {}
			}
		},
    components: {
    	MyStars
    },
    methods: {
      nameText(item) {
        const shortName = item.short_name ? item.short_name.trim() : '';
        const title = item.title ? item.title.trim() : '';
        return shortName&&shortName!='null' ? shortName: title;
      },
      callTel(tel) {
      	if (!tel) {
      		this.toast('暂无联系电话');
      		return;
      	}
      	uni.makePhoneCall({
      		phoneNumber: tel
      	});
      }
    }
	}
</script>

<style lang="less">
	.my-shops {
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
    position: relative;
		.logo {
			width: 90px;
			min-width: 90px;
			height: 80px;
			border-radius: 6px;
			margin-right: 10px;
		}
		.info {
			width: 100%;
			overflow: hidden;
			flex: 0 1 auto;
			.name {
				height: 30px;
				line-height: 30px;
				font-size: 15px;
			}
      .text-samll{
        font-size: 12px;
        color: #BABABA;
        position: absolute;
        right: 10px;
      }
      .name-title{
        display: inline-block;
        width: 80%;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
      }
			.discount {
				display: flex;
				align-items: center;
				padding: 5px 0 8px 0;
				.coupon {
					height: 20px;
					padding: 0 10px;
					line-height: 20px;
					text-align: center;
					border-radius: 2px;
					background-image: -webkit-linear-gradient(45deg, #ff9700, #ed1c24);
					background-image: linear-gradient(45deg, #ff9700, #ed1c24);
					color: #ffffff;
					font-size: 13px;
				}
				.distance {
					flex: 1;
					height: 20px;
					line-height: 20px;
					color: #999;
					text-align: right;
					font-size: 13px;
				}
        .discount-text{
          font-size: 12px;
          color: #FE4E5B;
          border: 1px solid #FE4E5B;
          border-radius: 4px;
          padding: 0 4px;
          margin-right: 10px;
        }
        .discount-btn{
          position: absolute;
          right: 10px;
          background: #FE4E5B;
          color: #fff;
          border-radius: 4px;
          font-size: 13px;
          padding: 2px 6px 4px;
        }
			}
			.address {
				height: 20px;
				line-height: 20px;
				color: #999;
				font-size: 12px;
				.icon {
					color: #0081ff;
				}
			}
		}
	}
	.my-shops {
		border-top: 1px solid #eee;
	}
  .shop-tel{
    font-size: 13px;
    .cuIcon-dianhua{
		font-size: 28rpx;
		color: #5c5c5c;
		padding-right: 5rpx;
    }
  }
</style>
